// 秒杀配置
import React, { Component } from 'react';
import { Select, Input, Button, Table, Modal } from 'antd';
import axios from "../../../../../../../../util/axios"
const { Option } = Select;
const { Search } = Input;

class SecConfig extends Component {
    state = {
        data: [],
        isModalVisible: false,
        columns: [
            {
                title: 'ID',
                dataIndex: 'id',
                align: 'center',
            },
            {
                title: '秒杀名称',
                dataIndex: 'name',
                align: 'center',
            },
            {
                title: '秒杀时段',
                dataIndex: 'mtime',
                align: 'center',
            },
            {
                title: '轮播图',
                dataIndex: 'img',
                render: url => <img src={url} alt="" style={{ width: "50px", height: "50px" }} />,
                className: 'bannerImg',
                align: 'center',
            },
            {
                title: '状态',
                dataIndex: 'zhuangt',
                align: 'center',
            },
            {
                title: '创建时间',
                dataIndex: 'ctime',
                align: 'center',
            },
            {
                title: '操作',
                align: 'center',
                render: (item) => <div>
                    <Button type="text">编辑</Button>
                    <Button type="text" onClick={() => { this.handleDel(item.id) }}>删除</Button>
                </div>
            },
        ]
    }
    handleDel = (id) => {
        axios.get('/Secondsdetile', { params: { id: id } }).then(res => {
            console.log(res);
            this.setState({
                data: res.data.data
            })
            this.getSecConfigData()
        })
    }

    componentDidMount() {
        this.getSecConfigData()
    }

    getSecConfigData() {
        axios.get("/Seconds").then(res => {
            console.log(res);
            this.setState({
                data: res.data.data
            })
        })
    }

    handleChange(value) {
        console.log(`selected ${value}`);
    }

    onSearch = (value) => {
        console.log(value)
        axios.get('/Secondssearch', { params: { name: value } }).then(res => {
            console.log(res);
            this.setState({
                data: res.data.data
            })
        })
    }

    showModal = () => {
        this.setState({
            isModalVisible: !this.state.isModalVisible
        })
    }
    handleOk = () => {
        this.setState({
            isModalVisible: !this.state.isModalVisible
        })
    }
    handleCancel = () => {
        this.setState({
            isModalVisible: !this.state.isModalVisible
        })
    }

    render() {
        let { data, isModalVisible, columns } = this.state
        return (
            <div className='secConfig'>
                <div className="searchTop">
                    <div className="slect">
                        <span>是否显示：</span>
                        <Select defaultValue="请选择" style={{ width: 200 }} onChange={this.handleChange}>
                            <Option value="开启">开启</Option>
                            <Option value="关闭">关闭</Option>
                        </Select>
                    </div>
                    <div className="search">
                        <span>秒杀名称：</span>
                        <Search placeholder="请输入秒杀名称" onSearch={this.onSearch} style={{ width: 260 }} />
                    </div>
                </div>
                <div className="addMs">
                    <Button type="primary" onClick={this.showModal}>添加秒杀配置</Button>
                </div>
                <div className="table">
                    <Table
                        columns={columns}
                        dataSource={data}
                        rowKey='id'
                        bordered
                        scroll={{ y: 540 }}
                    />
                </div>
                <Modal title="添加秒杀" visible={isModalVisible} onOk={this.handleOk} onCancel={this.handleCancel} cancelText={'取消'} okText={'确定'}>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                    <p>Some contents...</p>
                </Modal>
            </div>
        );
    }
}

export default SecConfig;
